<template>
	<view class="content">
    <view class="home-drop" id="target">
      <image src="/static/image/main.png" mode="scaleToFill" class="home-drop_img"></image>
    </view>
    <view class="home-content">
      <view class="circle-item">
        <view class="list-item">
          <view class="list-item__container" @click="InviteFriends">
            <view class="list-item__content list-item__content--center">
              <text class="list-item__content-title">我已邀请的好友</text>
            </view>
            <view class="list-item__content-text">2位</view>
            <view class=""><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
          </view>
        </view>
        <view class="showQR">
          出示下方小程序码，邀请朋友扫一扫
        </view>
        <view class="circle-item_QR">
          <image src="/static/image/1.png" mode="aspectFit" class="img"></image>
        </view>
        <view class="u-p-t-48"><u-line color="#d0d0d0" /></view>
        <view class="circel-item__explain">
          <view class="circel-item__explain-title">流程说明</view>
          <view class="u-m-t-54 u-m-b-54">
            <view class="circel-item__explain-text">欢迎推荐身边的朋友加入</view>
            <view class="circel-item__explain-text">分享本页面即可邀请车主进行认证</view>
            <view class="circel-item__explain-text">1、通过专属链接或者二维码推荐好友，享5积分/人</view>
            <view class="circel-item__explain-text">2、推荐的好友完成认证，享100积分/人</view>
          </view>
        </view>
      </view>
      <view style="height: 150rpx;"></view>
    </view>
    <view class="s-btn s-btn--primary s-size-default">发送邀请链接给朋友</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
      InviteFriends(){
        uni.navigateTo({
        	url: '/pages/Home/InviteFriends/InviteFriends'
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
	.content {
    background-color: #ffffff;
    height: calc(100vh - var(--window-top));
    .home-drop{
      width: 100%;
      height: 240rpx;
			position: fixed;
			z-index: 1;
      .home-drop_img{
        width: 100%;
        height: 100%;
      }
    }
    .home-content{
			width: 100%;
			background-color: #ffffff;
			position: absolute;
			z-index: 10;
			top: 240rpx;
    }
    .circle-item{
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        flex-direction: row;
        border-radius: 28rpx;
        padding: 32rpx;
        height: 108rpx;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .list-item__content-title{
              font-size: 28rpx;
              overflow: hidden;
              font-weight: 600;
            }
          }
          .list-item__content-text{
            color: $supernut-color;
            margin-right: 16rpx;
          }
          .list-item__content--center{
            justify-content: center;
          }
          
        }
      }
      .showQR{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
      }
      .circle-item_QR{
        width: 320rpx;
        height: 320rpx;
        margin: 64rpx auto;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .circel-item__explain{
        margin-top: 32rpx;
        padding:0 32rpx;
        .circel-item__explain-title{
          font-weight: 600;
        }
        .circel-item__explain-text{
          line-height: 1.5rem;
        }
      }
    }
	}
  
  
</style>
